<template>
  <!-- 费用接受字段 -->
  <div>
    <el-row class="pubCountFeeFiledList container">
      <el-col style="margin-right:10px;" class="content-left">
        <!-- 按钮与搜索 -->
        <el-row class="handleBox">
          <!-- 左侧按钮 -->
          <el-col :span="18">
            <el-button @click="addOrEditFunc('1')">新增</el-button>
            <el-button @click="addOrEditFunc('2')">编辑</el-button>
            <el-button @click="deleFunc()">删除</el-button>
            <el-button @click="addOrEditFunc('3')">查看</el-button>
            <el-button @click="addOrEditFunc('5')">复制</el-button>
            <el-button @click="refFunc()">引用情况</el-button>
          </el-col>
          <!-- 右侧查询图标 -->
          <el-col :span="6">
            <div class="handleIconBox">
              <!-- 查询弹框 -->
              <el-popover placement="left-start" trigger="click" popper-class="icon_porper">
                <div class="search_porper">
                  <el-form
                    :model="searchForm"
                    ref="searchForm"
                    label-width="100px"
                    label-position="left"
                    size="mini"
                  >
                    <el-form-item label="字段编码: " >
                      <el-input v-model="searchForm.fieldCode" style="width:150px" ></el-input>
                    </el-form-item>
                    <el-form-item label="字段名称：">
                      <el-input v-model="searchForm.fieldName" style="width:150px"></el-input>
                    </el-form-item>
                  </el-form>
                  <div style="text-align:center;padding:10px">
                    <el-button size="mini" @click="searchFunc">查询</el-button>
                    <el-button
                      size="mini"
                      @click="
                        (searchForm.fieldCode = ''), (searchForm.fieldName = '')
                      "
                    >重置</el-button>
                  </div>
                </div>
                <i class="iconfont icon-sousuo" title="搜索" slot="reference"></i>
              </el-popover>
              <!-- 字段展示弹框 -->
              <el-popover placement="bottom" width="150" trigger="click" popper-class="icon_porper">
                <div class="operation_checkbox">
                  <el-checkbox-group v-model="checkList">
                    <el-checkbox
                      v-for="item in textData"
                      :label="item.label"
                      :key="item.prop"
                    >{{ item.label }}</el-checkbox>
                  </el-checkbox-group>
                </div>
                <i class="iconfont icon-liebiaoshezhi" title="列表设置" slot="reference"></i>
              </el-popover>
            </div>
          </el-col>
        </el-row>

        <!-- 列表 -->
        <el-table ref="multipleTable" :data="tableData" style="width: 100%"
          @row-click="rowClick">
          <el-table-column width="55" type="selection"  />

          <el-table-column prop="fieldCode" label="字段编码" show-overflow-tooltip v-if="columnState[0]"  />

          <el-table-column prop="fieldName" label="字段名称 " show-overflow-tooltip v-if="columnState[1]" />

          <el-table-column prop="creator" label="创建人" show-overflow-tooltip sortable v-if="columnState[2]" />

          <el-table-column prop="createdTm" label="创建时间"
          :formatter="row =>(row.createdTm?timeFormat(row.createdTm):'-')"
          sortable
          show-overflow-tooltip
          v-if="columnState[3]">
          </el-table-column>
          <el-table-column
            prop="modifier"
            label="修改人"
            show-overflow-tooltip
            sortable
            v-if="columnState[4]"
            :formatter="row => row.modifier || '-'"
          ></el-table-column>
          <el-table-column prop="modifiedTm" 
           :formatter="row =>(row.modifiedTm?timeFormat(row.modifiedTm):'-')"
          label="修改时间" show-overflow-tooltip sortable v-if="columnState[5]">
          </el-table-column>
        </el-table>
        <!-- 分页插件 -->
        <pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchForm.page"
          :page-size="searchForm.size"
          @refresh="searchFunc"
          :total="total"
        ></pagination>
      </el-col>
    </el-row>
    <!-- 新增,编辑,查看 form保单 -->
    <el-dialog v-dialogDrag :title="titleName" :visible.sync="addOrEdit" width="514px">
      <el-form
        :model="saveForm"
        ref="saveOrEditRef"
        label-width="110px"
        label-position="left"
        :rules="saveFormRules"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="字段编码：" prop="fieldCode">
              <el-input
                v-model="saveForm.fieldCode"
                maxlength="40"
                :readonly="operateType==2||operateType==3"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="字段名称：" prop="fieldName">
              <el-input v-model="saveForm.fieldName" maxlength="40" :readonly="operateType==3"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="operateType==='3'">
            <el-form-item label="创建人: " prop="creator">
              <el-input v-model="saveForm.creator" maxlength="40" :readonly="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="operateType==='3'">
            <el-form-item label="创建时间: " prop="createdTm">
              <!-- <el-date-picker
                class="createdTm_input"
                v-model="saveForm.createdTm"
                type="datetime"
                format="yyyy-MM-dd hh:mm:ss"
                :readonly="true"
              ></el-date-picker> -->
                <el-input
                class="createdTm_input"
                v-model="saveForm.createdTm"
                :readonly="true"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="描述: " prop="descn">
              <el-input
                type="textarea"
                :rows="2"
                v-model="saveForm.descn"
                maxlength="40"
                :readonly="operateType==3"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="saveFormButton" v-if="operateType!=3">确 定</el-button>
        <el-button @click="cancelTne">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 新增,编辑,查看 form保单结束 -->

    <!-- 查看引用情况 -->
    <el-dialog v-dialogDrag title="引用情况" :visible.sync="refFalg" width="950px">
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane :label="tabPaneName" name="first">
          <el-row class="refqutoList container">
            <el-col style="margin-right:10px;" class="content-left">
              <!-- 按钮与搜索 -->
              <el-row class="handleBox">
                <!-- 左侧按钮 -->
                <el-col :span="24">
                  <el-button @click="viewFunc()">查看</el-button>
                </el-col>
                <!-- 右侧查询图标 -->
                <div></div>
              </el-row>

              <!-- 列表 -->
              <el-table ref="refmultipleTable" :data="refTableData"
              @row-click="refRowClick"
               height="300">
                <el-table-column width="35" type="selection"  />

                <el-table-column prop="ruleCode" label="规则编码" show-overflow-tooltip sortable />

                <el-table-column prop="ruleName" label="规则名称 " show-overflow-tooltip />

                <el-table-column prop="ruleType" label="规则类型"  show-overflow-tooltip sortable />

                <el-table-column prop="driverType" label="分摊方法"  show-overflow-tooltip sortable />

                <el-table-column prop="sceneCode" label="所属场景" show-overflow-tooltip sortable />

                <el-table-column prop="descn" label="描述"  show-overflow-tooltip />
              </el-table>
              <!-- 分页插件 -->
              <pagination
                @size-change="refhandleSizeChange"
                @current-change="refhandleCurrentChange"
                :current-page="refsearchForm.page"
                :page-size="refsearchForm.size"
                @refresh="refsearchFunc(reffiledCode)"
                :total="reftotal"
              ></pagination>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
    <!-- 查看引用情况结束 -->
     <!-- 查看 -->
    <el-dialog
      v-dialogDrag
      title="查看"
      :visible.sync="addOrEditRef"
      append-to-body
      width="65%"
      min-height="600px;"
      top="2%"
    >
      <!-- 引入公共组件 -->
      <ruleDefComponents
        :operateType="operateRefType"
        :ruleCode="ruleRefCode"
        @closeToQuery="closeToQuery"
        ref="childComponents"
      ></ruleDefComponents>
    </el-dialog>
  </div>
</template>


<script>
import { caPubCountFeeFild } from "@/api/index";
import onlyOneSearch from "@/components/onlyOneSearch";
import ruleDefComponents from "@/components/ca/ruleDefComponents";
import moment from "moment";
export default {
  data() {
    return {
      ruleRefCode:"",
      operateRefType:"",
      addOrEditRef:false,
      //表单元素过滤
      textData: [
        { prop: "fieldCode", label: "字段编码" },
        { prop: "fieldName", label: "模板名称" },
        { prop: "creator", label: "创建人" },
        { prop: "createdTm", label: "创建时间" },
        { prop: "modifier", label: "修改人" },
        { prop: "modifiedTm", label: "修改时间" }
      ], //双向绑定 选择表单展示字段
      checkList: [],
      //查询时默认条件
      searchForm: {
        page: 1,
        size: 15,
        fieldName: "",
        fieldCode: ""
      },
      total: 0,
      //表单提交时保存的数据
      saveFrom: {},
      //列表数据对象
      tableData: [
        // {
        //   fieldCode: "123",
        //   fieldName: "123",
        //   creator: "123",
        //   createdTm: 1557199289954,
        //   modifier: null,
        //   modifiedTm: null
        // }
      ],
      //也签信息
      titleName: "",
      //新增查看弹框是否展示
      addOrEdit: false,
      //按钮操作标识
      operateType: 1,
      //表单字段规则校验
      saveFormRules: {
        fieldCode: [
          { required: true, message: "该输入项为必输项", trigger: "blur" },
          {
            pattern: /^[A-Z]{1}[a-zA-Z_]{1,24}$/,
            message: "以大写字母开头且只能输入字母和下划线_,且长度不小于2不超过24",
            trigger: "blur"
          },
          { validator: this.validatorFieldCode, trigger: "blur" }
        ],
        fieldName: [
          { required: true, message: "该输入项为必输项", trigger: "blur" }
        ],
        creator: [
          { required: true, message: "该输入项为必输项", trigger: "blur" }
        ],
        createdTm: [
          { required: true, message: "该输入项为必输项", trigger: "blur" }
        ]
      },
      //保存实体
      saveForm: {},
      //引用情况页面控制
      refFalg: false,
      //引用情况页面标签页
      activeName: "first",
      //页签
      tabPaneName: "规则定义(0)",
      //规则定义引用情况数据
      refTableData: [],
      //规则引入查询条件
      reftotal: 0,
      reffiledCode: "",
      //规则引用查询
      refsearchForm: {
        page: 1,
        size: 15
      }
    };
  },
  components: {
    onlyOneSearch,
    ruleDefComponents
  },
  created() {
    this.checkListInit();
    console.log(this.tableData, "模拟数据");
  },
  computed: {
    columnState() {
      let arr = [],
        arr1 = this.textData,
        arr2 = this.checkList;
      for (let i = 0; i < arr1.length; i++) {
        let flag = false;
        for (let j = 0; j < arr2.length; j++) {
          if (arr1[i].label == arr2[j]) {
            flag = true;
            break;
          }
        }
        arr.push(flag);
      }
      return arr;
    }
  },
  mounted() {
    this.searchFunc();
  },
  watch: {},
  methods: {
    //行点击事件
    rowClick(row){
         if (this.$refs.multipleTable) {
        this.$refs.multipleTable.clearSelection();
      }
      this.$refs.multipleTable.toggleRowSelection(row, true);
    },
    validatorFieldCode(rule, value, callback) {
      if (this.operateType != "2") {  
        caPubCountFeeFild.countFeeFieldvaliRept({fieldCode:value}).then(res => {
          if (res.data === "0") {
           callback();
          }else {
            callback(new Error("编码已经存在"))
          }
             
        });
      }else{
        //编辑不校验
        callback();
      }
    },
    checkListInit() {
      this.checkList = this.textData.map(v => {
        return v.label;
      });
    },
    searchFunc() {
      let dataSearch = this.searchForm;
      console.log(dataSearch, "费用字段新增");
      caPubCountFeeFild.countFeeFieldQuery(dataSearch).then(res => {
        if (res.code === 200) {
          this.tableData = res.data.rows;
          this.total = res.data.total;
        }
      });
    },
    //添加
    addOrEditFunc(val) {
      if (this.$refs.saveOrEditRef) {
        this.$nextTick(() => {
          this.$refs.saveOrEditRef.resetFields();
        });
      }

      this.titleName = "新增费用字段标识";
      this.operateType = val;
      //清空数据
      this.saveForm = {};
      let dataSearch = {};
      if (val != "1") {
        let selection = this.$refs.multipleTable.selection;
        if (val == "2") {
          this.titleName = "编辑费用字段标识";
        } else if (val == "5") {
          this.titleName = "复制费用字段标识";
        } else {
          this.titleName = "查看费用字段标识";
        }
        if (selection.length != 1) {
          return this.$message.warning("请选择一条数据");
        }
        this.addOrEdit = true;
        dataSearch.fieldCode = selection[0].fieldCode;
      } else {
        this.addOrEdit = true;
      }
      dataSearch.operateType = val;
      caPubCountFeeFild.countFeeFieldToForm(dataSearch).then(res => {
        if (this.operateType == "1") {
          this.$set(this.saveForm, "creator", res.data.creator);
          this.$set(this.saveForm, "createdTm", res.data.createdTm);
        } else {
          this.saveForm = res.data;
        }
      });
    },
    //删除数据
    deleFunc() {
      let selection = this.$refs.multipleTable.selection;
      if (selection.length < 1) {
        return this.$message.warning("请选择数据进行删除");
      }
      let delData = { ids: selection.map(v => v.fieldCode) };

      caPubCountFeeFild.countFeeFieldcheckIsRemove(delData).then(res => {
        if (null == res.data || "" == res.data) {
          this.$confirm("您确定要删除选中的费用类型吗？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              caPubCountFeeFild.countFeeFieldRemove(delData).then(res => {
                if (res.code == 200) {
                  this.$message.success("删除成功");
                  this.searchFunc();
                }
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消删除"
              });
            });
        } else {
          return this.$message.warning(res.data + "被规则引用不可删除");
        }
      });
    },
    //查看引用情况
    refFunc() {
      let selected = this.$refs.multipleTable.selection;
      if (selected.length != 1) {
        return this.$message.warning("请选择一条数据进行查看");
      }
      this.refFalg = true;
      this.reffiledCode = selected[0].fieldCode;
      console.log(selected[0].fieldCode, "引入code");
      console.log(this.reffiledCode, "引入code");
      this.refsearchFunc(this.reffiledCode);
      //查询展示情况
    },
     //行点击事件
    refRowClick(row){
         if (this.$refs.refmultipleTable) {
        this.$refs.refmultipleTable.clearSelection();
      }
      this.$refs.refmultipleTable.toggleRowSelection(row, true);
    },
    //保存表单
    saveFormButton() {
      this.$refs.saveOrEditRef.validate(valid => {
        if (valid) {
          let saveData = {};

          this.$set(saveData, "operateType", this.operateType);
          this.$set(saveData, "pubCountFeeField", this.saveForm);
          console.log(saveData, "保存实体");
          console.log(this.saveForm, "saveForm");
          caPubCountFeeFild.countFeeFieldSave(saveData).then(res => {
            this.$message({
              message: res.message,
              type: "success"
            });
            this.addOrEdit = false;
            this.searchFunc();
          });
        }
      });
    },
    cancelTne() {
      this.addOrEdit = false;
    },
    timeFormat(val) {
      if (val) return moment(val).format("YYYY-MM-DD hh:mm:ss");
      else return "";
    },
    handleSizeChange(val) {
      this.searchForm.size = val;
      this.searchFunc();
      console.log(val, "每页数");
    },
    handleCurrentChange(val) {
      this.searchForm.page = val;
      this.searchFunc();
      console.log(val, "当前页");
    },
    //规则引入
    refhandleSizeChange(val) {
      this.refsearchForm.size = val;
      this.refsearchFunc(this.reffiledCode);
      console.log(val, "ref每页数");
    },
    refhandleCurrentChange(val) {
      this.refsearchForm.page = val;
      this.refsearchFunc(this.reffiledCode);
      console.log(val, "ref当前页");
    },
    refsearchFunc(val) {
      let refdataSearch = this.refsearchForm;
      refdataSearch.fieldCode = val;
      console.log(refdataSearch, "规则引入");
      caPubCountFeeFild.countFeeFieldQueryRef(refdataSearch).then(res => {
        if (res.code === 200) {
          this.refTableData = res.data.rows;
          this.reftotal = res.data.total;
          console.log(res.datas.row, "ref当前页");
          this.tabPaneName = "规则引用(" + this.reftotal + ")";
        }
      });
      //对表格进行重新渲染 表格错位问题
      this.$nextTick(() => {
        this.$refs.refmultipleTable.doLayout();
      });
    },
      // 查看引用
    viewFunc() {
      this.operateRefType = "3";
      let selection = this.$refs.refmultipleTable.selection;
      if (selection.length != 1) {
        return this.$message.warning("请选择一条数据进行查看");
      }
      let row = selection[0];
      this.ruleRefCode = row.ruleCode;
      this.addOrEditRef = true;
      this.$nextTick(()=>{
        this.$refs.childComponents.showTabInit();
       })
      
    },
      // 弹窗关闭调用查询
    closeToQuery(){
      this.addOrEdit = false;
    },
  }
};
</script>
                    
<style lang="scss" scoped>
</style>
